<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>我的预约-农业知识交流论坛</title>
    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/css/mycss.css}">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2080705_jiuqmw0ynch.css">
</head>
<body>
<div th:replace="~{common/header::header}"></div>

<div class="container">
    <div class="row">
        <div class="col-md-3">
            <div th:replace="~{user/index::userbtn}"></div>
        </div>

        <div class="col-md-9 blog-main">
            <br>
            <hr class="layui-bg-blue">
            <div class="blog-post">
                <h2 class="blog-post-title">我的预约</h2>
                <div class="lecture-list">
                    <div th:if="${bookings == null || bookings.empty}" class="alert alert-info">
                        暂无预约记录
                    </div>
                    <div th:each="lecture : ${bookings}" class="card mb-3">
                        <div class="card-body">
                            <h5 class="card-title" th:text="${lecture.title}">讲座标题</h5>
                            <p class="card-text" th:text="${lecture.description}">讲座描述</p>
                            <div class="d-flex justify-content-between align-items-center">
                                <small class="text-muted">
                                    <i class="iconfont icon-time"></i>
                                    <span th:text="${#dates.format(lecture.time, 'yyyy-MM-dd HH:mm')}">讲座时间</span>
                                </small>
                                <small class="text-muted">
                                    <i class="iconfont icon-location"></i>
                                    <span th:text="${lecture.location}">讲座地点</span>
                                </small>
                            </div>
                            <div class="mt-2">
                                <button class="btn btn-danger btn-sm cancel-booking" th:data-id="${lecture.id}">
                                    取消预约
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div th:replace="~{common/footer::footer}"></div>

<script th:src="@{/js/jquery-3.5.1.min.js}"></script>
<script th:src="@{/layui/layui.all.js}"></script>
<script>
    $(document).ready(function() {
        $('.cancel-booking').click(function() {
            const lectureId = $(this).data('id');
            if (confirm('确定要取消这个预约吗？')) {
                $.post('/lecture/cancel/' + lectureId, function(response) {
                    if (response === 'success') {
                        location.reload();
                    } else {
                        alert(response);
                    }
                });
            }
        });
    });
</script>
</body>
</html> 